Skip to main content

Vite Development Workflow

Introduction​

Vite is designed to offer an ultra-fast development experience by optimizing the way files are served during development. Unlike traditional build tools, Vite leverages modern browser features such as ES Modules and uses a server-based approach to provide fast feedback, enabling a smooth and efficient development process. In this guide, we’ll explore the key aspects of the Vite development workflow, including how to use the development server, take advantage of Hot Module Replacement (HMR), and customize the development environment.

1. How to Use the Development Server (npm run dev)​

One of the core features of Vite is its fast development server. When you run npm run dev, Vite starts a local server that serves your application files, handles live updates, and supports hot module replacement. This server automatically provides features like ES module support, file watching, and more. It’s the perfect tool for local development.

Starting the Vite Development Server​

To start the Vite development server, follow these steps:

  1. Install dependencies: If you haven’t already, make sure you install the project’s dependencies by running:

    npm install

  2. Run the development server: To start the server, run the following command in your terminal:

    npm run dev

    After running this command, Vite will:

    • Start a development server on http://localhost:3000 by default.
    • Serve your application from the src/ directory.
    • Provide real-time updates on any file changes.

  3. Access your application: Once the development server is running, open a browser and navigate to http://localhost:3000 (or the custom port if configured) to view your application. Any changes you make to your files will be reflected immediately.

Example Command​

Here’s an example of the command sequence:

# Install dependencies (only the first time)
npm install

# Start the Vite development server
npm run dev

2. Hot Module Replacement (HMR)​

What is Hot Module Replacement?​

Hot Module Replacement (HMR) is one of Vite’s standout features. It allows for instant updates to the page when you make changes to your code—without requiring a full page reload. This means that any updates to JavaScript, CSS, or other assets are reflected instantly in the browser, improving the development experience.

How HMR Works​

HMR works by replacing only the modules that were changed, without reloading the entire page. This helps maintain the application’s state and offers faster feedback loops during development. For example, if you update a CSS file, the styles will be applied immediately without refreshing the entire page.

The best part is that HMR is enabled by default in Vite. All you need to do is run the Vite development server (npm run dev), and it will automatically monitor your files for changes.

Benefits of HMR​

  • Instant feedback: Changes are reflected instantly, speeding up the development process.
  • No page reloads: HMR replaces the updated modules without requiring the page to reload, allowing the state of your app (such as form data, input, or scroll position) to remain intact.
  • Improved performance: By updating only the changed parts of the application, HMR minimizes the impact on performance and resources.

Example​

If you change the content of main.js or any other source file, the update will reflect immediately without refreshing the page. For instance, if you update the innerHTML of a DOM element:

document.getElementById('app').innerHTML = '<h1>Hello, Vite with HMR!</h1>';

Upon saving the file, the content in the browser will update immediately without needing to refresh the entire page.

3. Customizing the Development Server​

Vite allows you to customize the development server in various ways. This can be useful when you need to change the port, enable HTTPS, or adjust other server settings for your development workflow.

You can customize the dev server behavior in the vite.config.js file. Here's how you can do it:

Changing the Port​

By default, Vite runs on port 3000. If you need to run your development server on a different port, you can specify the port option in the server configuration within vite.config.js.

// vite.config.js
export default {
  server: {
    port: 4000  // Change port to 4000
  }
};

After this change, Vite will start the server on http://localhost:4000 instead of the default http://localhost:3000.

Enabling HTTPS​

If you want to run the development server over HTTPS, you can enable SSL by providing https configuration in the server option.

// vite.config.js
import fs from 'fs';

export default {
  server: {
    https: {
      key: fs.readFileSync('path/to/your/private-key.pem'),
      cert: fs.readFileSync('path/to/your/certificate.pem')
    }
  }
};

This will allow Vite to serve your app over HTTPS locally, which is useful if you're working with features that require HTTPS (like service workers or APIs that enforce secure connections).

Customizing Server Options​

You can also tweak other server settings, such as enabling gzip compression or setting proxy rules.

Example - Enabling Gzip Compression​

// vite.config.js
export default {
  server: {
    gzip: true
  }
};

Example - Configuring a Proxy​

If you need to proxy requests to an external server (e.g., a backend API), you can set up a proxy in the vite.config.js file.

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        secure: false
      }
    }
  }
};

In this example, requests to /api will be forwarded to http://localhost:5000, enabling you to mock backend APIs during development.

4. Common Development Commands​

In addition to npm run dev, there are other useful commands to manage the Vite development workflow:

  • npm run build: Builds the project for production. This command bundles and optimizes the code and assets, creating the final output in the dist/ folder.

  • npm run preview: Preview the production build locally. This command serves the production build from the dist/ directory to ensure everything works as expected.

Conclusion​

The Vite development workflow is designed to enhance developer productivity with fast, responsive, and customizable features. By using the development server (npm run dev), developers can take advantage of Hot Module Replacement (HMR) to see changes reflected instantly without a page reload, greatly improving the speed of development. Additionally, Vite provides flexibility through configuration options that allow you to customize the server’s port, enable HTTPS, and set up proxies, giving you full control over your development environment.

With Vite’s development tools, you’ll experience a streamlined, modern development workflow that makes building and testing web applications faster and easier than ever before.